<template>
  <el-dialog :title="$t('table.update')" width="500px" :visible="true" @close="onClose">
    <el-form :model="form" :rules="rules" ref="dialog-form" label-width="50px" size="small">
      <el-form-item :label="$t('org.name')" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item :label="$t('org.region')" prop="regionCode">
        <el-cascader
          size="small"
          :options="addressData"
          v-model="region"
          @change="onRegionChange" style="width: 100%;">
        </el-cascader>
      </el-form-item>
      <el-form-item :label="$t('org.street')" prop="street">
        <el-input v-model="form.street"></el-input>
      </el-form-item>
      <el-form-item :label="$t('org.parent')">
        <el-select v-model="form.parent.id" filterable clearable placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in orgs"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{$t('dialog.cancel')}}</el-button>
      <el-button type="primary" @click="save">{{$t('dialog.save')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Vue from 'vue'
  import { regionData, CodeToText } from 'element-china-area-data'
  import { vsprintf } from 'sprintf-js/dist/sprintf.min.js'
  import { validExists, updateToSubmit } from '@/utils/utils'
  import { fetchQuery } from '@/api/restful'

  export default {
    data() {
      var form = Object.assign({}, this.$parent.selectedRow);
      delete form.children;
      delete form.parent;
      if(!this.$parent.selectedRow.parent){
        form.parent = {};
      }
      else{
        form.parent = {id: this.$parent.selectedRow.parent.id};
      }
      var regionCode = form.regionCode;
      var region = [regionCode.substring(0, 2)+'0000', regionCode.substring(0, 4)+'00', regionCode];
      form.regionName = CodeToText[region[0]]+'/'+CodeToText[region[1]]+'/'+CodeToText[region[2]];
      return {
        form: form,
        addressData: regionData,
        region: region,
        orgs: [],
        rules:{
          name:[
            { required: true, message:this.$t('rules.message.required'), trigger: 'blur' },
            { max: 20, message: vsprintf(this.$t('rules.message.maxLen'), 20), trigger: 'blur' },
            { validator: (rule, value, callback) => { validExists.apply(this, [value, callback, {id: form.id, name: value}]); }, trigger: 'blur' }
          ],
          regionCode:[
            { required: true, message:this.$t('rules.message.required'), trigger: 'blur' },
          ],
          street:[
            { required: true, message:this.$t('rules.message.required'), trigger: 'blur' },
            { max: 50, message: vsprintf(this.$t('rules.message.maxLen'), 50), trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      save(){
        this.form.fullAddress = this.form.regionName +' '+ this.form.street;
        let params = JSON.parse(JSON.stringify(this.form));
        if(!params.parent.id){
          params.parent = null;
        }
        updateToSubmit.apply(this, [params])
      },
      onClose(){
        this.$router.push("/");
      },
      onRegionChange(val){
        if(val.length==3){
          this.form.regionCode = val[2];
          this.form.regionName = CodeToText[val[0]]+'/'+CodeToText[val[1]]+'/'+CodeToText[val[2]];
        }
      }
    },
    mounted(){
      fetchQuery('/org/query',{unpath: this.form.id}).then(response => {
        if(response.data.success) {
          let count = 0;
          for(var i=0; i<response.data.result.length; i++) {
            let row = response.data.result[i];
            if(row.id != this.form.id){
              Vue.set(this.orgs, count++, row);
            }
          }
        }
      })
    }
  };
</script>
